<template>
  <div class="warp-box" v-loading="loading" element-loading-text="文档加载中...">
    <iframe id="frame" v-show="visible" :src="pdfSrc" class="iframe"></iframe>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { dwHttp } from '@/utils/http';
defineOptions({
  name: 'DwPdfViewer',
});
const props = defineProps({
  url: {
    type: String,
    required: true,
    defualt: () => {
      return '';
    },
  },
});
const loading = ref<boolean>(true);
const visible = ref<boolean>(false);
const url = ref<string>(props.url);
const pdfSrc = ref<string>('/pdfjs/web/viewer.html');
onMounted(() => {
  dwHttp({
    method: 'post',
    url: url.value,
    responseType: 'blob',
    timeout: 100000,
    isSuccessTip: false,
    isErrorTip: false,
  }).then((data) => {
    const blob = URL.createObjectURL(data as unknown as Blob);
    pdfSrc.value = `/pdfjs/web/viewer.html?file=${blob}`;
    loading.value = false;
    visible.value = true;
  });
});
</script>
<style lang="scss" scoped>
.warp-box {
  width: 100%;
  height: 100%;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  border-bottom: 2px solid #fff;
}

.iframe {
  width: calc(100% - 10px);
  height: 100%;
  border: 0px;
  margin: 0;
}
</style>
